﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="InsAverageMark.aspx.cs" Inherits="InsAverageMark" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>巡检平均成绩</title>

    <link href="../css/bootstrap.min.css" rel="stylesheet" />

    <link href="../css/ExtStyle.css" rel="stylesheet" type="text/css" />
    <script src="../js/jquery/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="../js/extTools.js" type="text/javascript"></script>
    <script src="../weixin/laydate/laydate.js" type="text/javascript"></script>

    <script src="../js/bootstrap.min.js" type="text/javascript"></script>

    <link href="../js/plugins/bootstrap-multiselect/bootstrap-multiselect.css" rel="stylesheet" />
    <script src="../js/plugins/bootstrap-multiselect/bootstrap-multiselect.js" type="text/javascript"></script>
    <script src="../js/plugins/layer/layer.min.js" type="text/javascript"></script>

    <style type="text/css">
        .cyl_tr {
            height: 30px !important;
            text-align: center;
        }

        .cyl_tr_td {
            background-color: #C0C0C0;
        }

        .cyl_button {
            margin-top: 3px;
            margin-left: 3px;
            text-decoration: none;
            position: relative;
            height: 24px;
            line-height: 24px;
            width: 72px;
            background-position: 0 -250px;
            color: #fff;
            display: inline-block;
            text-align: center;
            background-color: dodgerblue;
            -webkit-border-radius: 4px;
        }

        .finishround {
            position: absolute;
            top: 34px;
            right: 10px;
            margin: 0 3px;
            text-align: center;
            line-height: 38px;
            font-size: 14px;
            color: coral;
            width: 38px;
            height: 38px;
            border: 1px solid coral;
            border-radius: 100%;
        }
    </style>
    <script type="text/javascript">

        var CountMapText = ["北京市", "天津市", "上海市", "重庆市", "河北省", "山西省", "辽宁省", "吉林省", "黑龙江省", "江苏省",
            "浙江省", "安徽省", "福建省", "江西省", "山东省", "河南省", "湖北省", "湖南省", "广东省", "海南省",
            "四川省", "贵州省", "云南省", "陕西省", "甘肃省", "青海省", "台湾省", "内蒙古自治区", "广西壮族自治区", "西藏自治区",
            "宁夏回族自治区", "新疆维吾尔自治区", "香港特别行政区", "澳门特别行政区"];

        var CountMapValue = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

        //绑定省份下啦数据
        function BindProvinceData() {

            //调用接口
            CompanyX.GetProvinceData("", {
                success: function (data) {
                    //console.log(data);
                    if (data.length > 0) {
                        var objSelect = document.getElementById("selProvince");
                        var selHtml = "<option value=\"\">---省份---</option>";
                        for (var i = 0; i < data.length; i++) {
                            selHtml = selHtml + "<option value=\"" + data[i].BigAreaName + "\">" + data[i].BigAreaName + "</option>";
                        }
                        objSelect.innerHTML = selHtml;
                    }
                    else {
                        Ext.net.Notification.show({
                            html: '没有省份数据',
                            title: '提示'
                        });
                    }
                }
            });
        }

        //绑定店经理下啦数据
        var ShopManagerItem = [];
        function BindShopManagerData() {
            var StartTime = document.getElementById("starttime").value;
            var EndTime = document.getElementById("endtime").value;
            var Province = document.getElementById("selProvince").value;
            var ShopManager = ShopManagerItem; // document.getElementById("selShopManager").value;
            if (StartTime == "" || EndTime == "") {
                Ext.MessageBox.alert("提示", "查询开始时间和结束时间不能为空！");
            }
            else {
                EndTime = EndTime + " 23:59:59";
                var JsonParams = { "StartTime": StartTime, "EndTime": EndTime, "Province": Province, "ShopManager": ShopManager };
                //调用接口
                CompanyX.GetShopManagerData(JsonParams, {
                    success: function (data) {
                        //console.log(data);
                        if (data.length > 0) {
                            //var objSelect = document.getElementById("selShopManager");
                            //var selHtml = "<option value=\"\">---店经理---</option>";
                            //for (var i = 0; i < data.length; i++) {
                            //    selHtml = selHtml + "<option value=\"" + data[i].ShopManager + "\">" + data[i].ShopManager + "</option>";
                            //}
                            //objSelect.innerHTML = selHtml;

                            //给前端<select>赋值
                            $("#selShopManager1").empty();
                            //$("#selShopManager1").append("<option value=''>店经理</option>");
                            for (var i = 0; i < data.length; i++) {
                                $("#selShopManager1").append("<option value='" + data[i].ShopManager + "'>" + data[i].ShopManager + "</option>");
                            }
                            for (var i = 0; i < ShopManagerItem.length; i++) {
                                $("#selShopManager1 option[value='" + ShopManagerItem[i] + "'] ").attr("selected", true);
                            }

                            //初始化multiselect控件
                            $("#selShopManager1").multiselect({
                                buttonWidth: 120,  //选择框的大小
                                //enableFiltering: true,
                                //includeSelectAllOption: true,//是否现实全选
                                maxHeight: 300,
                                onChange: function (option, checked, select) {
                                    //var priceId = $(option).val();
                                    //var priceNo = $("#selShopManager1").find("option:selected").text();
                                    ShopManagerItem = [];
                                    $("#selShopManager1 :selected").each(function (i, selected) {
                                        ShopManagerItem.push($(selected).val());
                                    });
                                    //console.log(ShopManagerItem);
                                    ChangeShopManager();
                                }

                            }).multiselect('rebuild'); //若数据源要变换，则加上rebuild

                        }
                        else {
                            Ext.net.Notification.show({
                                html: '没有店经理数据',
                                title: '提示'
                            });
                        }
                    }
                });
            }
        }


        //初始化方法
        function multiselect(obj) {
            $(obj).multiselect({
                buttonWidth: 120,  //选择框的大小
                includeSelectAllOption: true,//是否现实全选
                maxHeight: 200,
            });
        }
        //动态创建option
        function newOption(data, className) {
            var option;
            for (var i = 0; i < data.length; i++) {
                if (data[i].selected) {  //判断是否要初始化时就选择
                    option += '<option value="' + data[i].value + '"  selected="' + data[i].selected + '">' + data[i].label + '</option>';
                } else {
                    option += '<option value="' + data[i].value + '">' + data[i].label + '</option>';
                }
            }
            $(className).html(option);//将内容显示在复选框， $(className).append(option) 也是可以的;
            multiselect(className);
        }

        //绑定城市平均成绩
        function BindCityTable(CityAveData) {
            var objTable = document.getElementById("CityTable");
            var objTr = "";
            for (var i = 0; i < CityAveData.length; i++) {
                objTr = objTr + "<tr class=\"cyl_tr\"><td>" + CityAveData[i].name + "</td><td>" + CityAveData[i].num + "</td><td>" + CityAveData[i].ave + "</td></tr>";
            }
            objTable.innerHTML = objTr;
        }

        //绑定店经理平均成绩
        function BindShopManagerTable(ManagerAveData) {
            var objTable = document.getElementById("ShopManagerTable");
            var objTr = "";
            for (var i = 0; i < ManagerAveData.length; i++) {
                objTr = objTr + "<tr class=\"cyl_tr\"><td>" + ManagerAveData[i].name + "</td><td>" + ManagerAveData[i].num + "</td><td>" + ManagerAveData[i].ave + "</td></tr>";
            }
            objTable.innerHTML = objTr;
        }

        //绑定图表的数据
        function BindMapTable(MapAveData) {
            CountMapValue = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
            for (var i = 0; i < CountMapText.length; i++) {
                for (var j = 0; j < MapAveData.length; j++) {
                    if (CountMapText[i].indexOf(MapAveData[j].name) >= 0) {
                        CountMapValue[i] = MapAveData[j].ave;
                    }
                }
            }
            //console.log(CountMapValue);

            var objPage = document.getElementById("cyl_CountMap");
            objPage.src = "InsAverageCountMap.html";
        }

        //======查询动作==========================================================
        //主查询
        function QueryAve() {
            BindShopManagerData();
            var StartTime = document.getElementById("starttime").value;
            var EndTime = document.getElementById("endtime").value;
            var Province = document.getElementById("selProvince").value;
            var ShopManager = ShopManagerItem; // document.getElementById("selShopManager").value;
            if (StartTime == "" || EndTime == "") {
                Ext.MessageBox.alert("提示", "查询开始时间和结束时间不能为空！");
            }
            else {
                EndTime = EndTime + " 23:59:59";
                var JsonParams = { "StartTime": StartTime, "EndTime": EndTime, "Province": Province, "ShopManager": ShopManager };
                var index = layer.load(1, {
                    shade: [0.1, '#fff'] //0.1透明度的白色背景
                });
                //调用接口
                CompanyX.QueryAveRun(JsonParams, {
                    timeout: 300000,
                    success: function (data) {
                        //console.log(data);
                        layer.close(index);
                        if (data.State == 1) {

                            document.getElementById("spAllAve").innerHTML = data.AllAve;
                            //var CityAveData = [{ "name": "广州市", "num": 9, "ave": 89.9 }, { "name": "佛山市", "num": 12, "ave": 79.9 }, { "name": "中山市", "num": 12, "ave": 79.9 }];
                            BindCityTable(data.CityAve);

                            //var ManagerAveData = [{ "name": "张三", "num": 9, "ave": 89.9 }, { "name": "李四", "num": 12, "ave": 79.9 }, { "name": "王五", "num": 12, "ave": 79.9 }];
                            BindShopManagerTable(data.ManagerAve);

                            //var MapAveData = [{ "name": "北京市", "num": 15, "ave": 89.9 }, { "name": "天津市", "num": 12, "ave": 79.9 }, { "name": "广东省", "num": 12, "ave": 79.9 }];
                            BindMapTable(data.MapAve);

                        }
                        else { }
                        
                    },
                    error: function () {
                        alert("通讯超时,请检查网络.");
                        layer.close(index);
                    }
                });
            }
        }

        //选择省份时触发查询
        function ChangeProvince() {
            var StartTime = document.getElementById("starttime").value;
            var EndTime = document.getElementById("endtime").value;
            var Province = document.getElementById("selProvince").value;
            var ShopManager = ShopManagerItem; // document.getElementById("selShopManager").value;
            if (StartTime == "" || EndTime == "") {
                Ext.MessageBox.alert("提示", "查询开始时间和结束时间不能为空！");
            }
            else {
                EndTime = EndTime + " 23:59:59";
                var JsonParams = { "StartTime": StartTime, "EndTime": EndTime, "Province": Province, "ShopManager": ShopManager };
                var index = layer.load(1, {
                    shade: [0.1, '#fff'] //0.1透明度的白色背景
                });
                //调用接口
                CompanyX.ChangeProvinceRun(JsonParams, {
                    timeout: 300000,
                    success: function (data) {
                        //console.log(data);
                        layer.close(index);
                        if (data.State == 1) {
                            BindCityTable(data.CityAve);
                        }
                        else { }
                    },
                    error: function () {
                        alert("通讯超时,请检查网络.");
                        layer.close(index);
                    }
                });
            }
        }

        //选择选择店经理时触发查询
        function ChangeShopManager() {
            var StartTime = document.getElementById("starttime").value;
            var EndTime = document.getElementById("endtime").value;
            var Province = document.getElementById("selProvince").value;
            var ShopManager = ShopManagerItem; // document.getElementById("selShopManager").value;
            if (StartTime == "" || EndTime == "") {
                Ext.MessageBox.alert("提示", "查询开始时间和结束时间不能为空！");
            }
            else {
                EndTime = EndTime + " 23:59:59";
                var JsonParams = { "StartTime": StartTime, "EndTime": EndTime, "Province": Province, "ShopManager": ShopManager };
                var index = layer.load(1, {
                    shade: [0.1, '#fff'] //0.1透明度的白色背景
                });
                //调用接口
                CompanyX.ChangeShopManagerRun(JsonParams, {
                    timeout: 300000,
                    success: function (data) {
                        //console.log(data);
                        layer.close(index);
                        if (data.State == 1) {
                            BindShopManagerTable(data.ManagerAve);
                        }
                        else { }
                    },
                    error: function () {
                        alert("通讯超时,请检查网络.");
                        layer.close(index);
                    }
                });
            }
        }

        //导出城市的平均数据 
        function OutCityAve() {
            var StartTime = document.getElementById("starttime").value;
            var EndTime = document.getElementById("endtime").value;
            var Province = document.getElementById("selProvince").value;
            var ShopManager = ShopManagerItem; // document.getElementById("selShopManager").value;
            if (StartTime == "" || EndTime == "") {
                Ext.MessageBox.alert("提示", "查询开始时间和结束时间不能为空！");
            }
            else {
                EndTime = EndTime + " 23:59:59";
                var JsonParams = { "StartTime": StartTime, "EndTime": EndTime, "Province": Province, "ShopManager": ShopManager };
                var index = layer.load(1, {
                    shade: [0.1, '#fff'] //0.1透明度的白色背景
                });
                //调用接口
                CompanyX.OutCityAveRun(JsonParams, {
                    timeout: 300000,
                    success: function (data) {
                        //console.log(data);
                        layer.close(index);
                        if (data.State == 1) {
                            outExcle(data.Path);
                        }
                        else {
                            Ext.MessageBox.alert("提示", data.Msg);
                        }
                    },
                    error: function () {
                        alert("通讯超时,请检查网络.");
                        layer.close(index);
                    }
                });
            }
        }

        //导出店经理平均分数据
        function OutManagerAve() {
            var StartTime = document.getElementById("starttime").value;
            var EndTime = document.getElementById("endtime").value;
            var Province = document.getElementById("selProvince").value;
            var ShopManager = ShopManagerItem; // document.getElementById("selShopManager").value;
            if (StartTime == "" || EndTime == "") {
                Ext.MessageBox.alert("提示", "查询开始时间和结束时间不能为空！");
            }
            else {
                EndTime = EndTime + " 23:59:59";
                var JsonParams = { "StartTime": StartTime, "EndTime": EndTime, "Province": Province, "ShopManager": ShopManager };
                var index = layer.load(1, {
                    shade: [0.1, '#fff'] //0.1透明度的白色背景
                });
                //调用接口 
                CompanyX.OutManagerAveRun(JsonParams, {
                    timeout: 300000,
                    success: function (data) {
                        //console.log(data);
                        layer.close(index);
                        if (data.State == 1) {
                            outExcle(data.Path);
                        }
                        else {
                            Ext.MessageBox.alert("提示", data.Msg);
                        }
                    },
                    error: function () {
                        alert("通讯超时,请检查网络.");
                        layer.close(index);
                    }
                });
            }
        }

        //页面加载运行
        $(function () {
            var date = new Date();
            var dateTime = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
            $("#starttime").val(dateTime);
            $("#endtime").val(dateTime);

            BindProvinceData();
            BindShopManagerData();
        })

        window.onresize = function () {
            var objPage = document.getElementById("cyl_CountMap");
            objPage.src = "InsAverageCountMap.html";

        }

    </script>

</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Neptune" />
    <ext:Viewport ID="Viewport1" runat="server">
        <LayoutConfig>
            <ext:HBoxLayoutConfig Align="Stretch" />
        </LayoutConfig>
        <Defaults>
            <ext:Parameter Name="margin" Value="2 0" Mode="Value" />
        </Defaults>
        <Items>
            <ext:TabPanel ID="TabPanel1" runat="server" Flex="1">
                <Items>
                    <ext:Panel runat="server" Title="巡检平均成绩" AutoScroll="true" Layout="AutoLayout" Height="500">
                        <Items>
                            <ext:Panel runat="server">
                                <Content>
                                    <div style="height: 100%">
                                        <div style="height: 32px;">
                                            <div style="width: 100%; height: 32px; background-color: rgba(227, 251, 227, 1); border-bottom: 2px solid #C0C0C0;">
                                                <a href="javascript:" class="cyl_button" onclick="QueryAve();">查询</a>
                                                <a href="javascript:" class="cyl_button" onclick="OutCityAve();">导出城市</a>
                                                <a href="javascript:" class="cyl_button" onclick="OutManagerAve();">导出店经理</a>
                                            </div>
                                        </div>
                                        <div style="height: 42px; line-height: 42px;">
                                            &nbsp;巡检时间：<input type="text" class="input-width" id="starttime" style="width: 120px; height: 30px !important;" />&nbsp;至&nbsp;
                                            <input type="text" class="input-width" id="endtime" style="width: 120px; height: 30px !important;" />
                                            <div style="height: 42px; line-height: 42px; float: right;">
                                                <span style="margin-right: 58px">全国平均成绩：</span><span id="spAllAve" class="finishround" style="color: red; border: 1px solid #C0C0C0;">99.9</span>
                                            </div>
                                        </div>
                                        <div style="width: 100%; height: 367px; border: 1px solid #C0C0C0;">
                                            <div style="width: 50%; margin: 2px; float: left; border-right: 1px solid #C0C0C0; padding-right: 14px;">
                                                <div style="width: 100%; height: 38px; line-height: 30px; border-bottom: 1px solid #C0C0C0;">
                                                    城市平均成绩
                                                    <span style="float: right;">省份：
                                                        <select id="selProvince" style="height: 34px; width: 120px;" onchange="ChangeProvince();">
                                                            <option value="">---省份---</option>
                                                        </select>
                                                    </span>
                                                </div>
                                                <div style="height: 323px; overflow-y: scroll;">
                                                    <table border="1" cellpadding="0" cellspacing="0" style="width: 100% !important; border: none; border-collapse: collapse; border: 1px solid black;">
                                                        <thead>
                                                            <tr class="cyl_tr">
                                                                <td class="cyl_tr_td">城市</td>
                                                                <td class="cyl_tr_td">店铺数量</td>
                                                                <td class="cyl_tr_td">平均数</td>
                                                            </tr>
                                                        </thead>
                                                        <tbody id="CityTable">
                                                            <%--<tr class="cyl_tr">
                                                                <td>1</td>
                                                                <td>2</td>
                                                                <td>3</td>
                                                            </tr>
                                                            <tr class="cyl_tr">
                                                                <td>1</td>
                                                                <td>2</td>
                                                                <td>3</td>
                                                            </tr>--%>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                            <div style="width: 49%; margin: 2px; float: right;">
                                                <div style="width: 100%; height: 38px; line-height: 30px; border-bottom: 1px solid #C0C0C0;">
                                                    店经理平均成绩
                                                    <span style="float: right;">店经理：
                                                        <%--<select id="selShopManager" multiple="multiple" style="height:26px; width:120px; display:none;" onchange="ChangeShopManager();">
                                                            <option value="">---店经理---</option>
                                                        </select>--%>

                                                        <select id="selShopManager1" multiple="multiple" style="width: 100px !important; height: 28px !important;">
                                                            <%--<option>一室一厅</option>--%>
                                                        </select>

                                                    </span>
                                                </div>
                                                <div style="height: 323px; overflow-y: scroll;">
                                                    <table border="1" cellpadding="0" cellspacing="0" style="width: 100% !important; border: none; border-collapse: collapse; border: 1px solid black;">
                                                        <thead>
                                                            <tr class="cyl_tr">
                                                                <td class="cyl_tr_td">店经理</td>
                                                                <td class="cyl_tr_td">店铺数量</td>
                                                                <td class="cyl_tr_td">平均数</td>
                                                            </tr>
                                                        </thead>
                                                        <tbody id="ShopManagerTable">
                                                            <%--<tr class="cyl_tr">
                                                                <td>1</td>
                                                                <td>2</td>
                                                                <td>3</td>
                                                            </tr>
                                                            <tr class="cyl_tr">
                                                                <td>1</td>
                                                                <td>2</td>
                                                                <td>3</td>
                                                            </tr>--%>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>

                                        </div>
                                        <div style="width: 100%; height: 300px; margin-top: 1px;">
                                            <iframe id="cyl_CountMap" src="InsAverageCountMap.html" style="width: 100%; height: 100%;"></iframe>
                                        </div>

                                    </div>
                                </Content>
                            </ext:Panel>
                        </Items>
                    </ext:Panel>

                </Items>
            </ext:TabPanel>
        </Items>
    </ext:Viewport>
</body>
<script type="text/javascript">
    laydate.render({
        elem: '#starttime'
    });
    laydate.render({
        elem: '#endtime'
    });
</script>

</html>
